<!-- TaskCard.vue -->
<template>
  <view class="task-card" @click="$emit('click')">
    <view class="task-header">
      <text class="task-title">{{ task.title }}</text>
      <view class="task-priority" :style="{ backgroundColor: task.priority.color }">
        {{ task.priority.name }}
      </view>
    </view>
    
    <view class="task-content">
      <view class="task-info">
        <view class="info-item">
          <uni-icons type="calendar" size="14" color="#64748b"></uni-icons>
          <text class="info-text">{{ formatDate(task.startTime) }} - {{ formatDate(task.endTime) }}</text>
        </view>
        <view class="info-item">
          <uni-icons type="person" size="14" color="#64748b"></uni-icons>
          <text class="info-text">{{ assigneeName }}</text>
        </view>
      </view>
      
      <view class="task-description">{{ task.description }}</view>
      
      <view class="task-footer">
        <view class="task-status" :style="{ backgroundColor: task.status.color + '1A', color: task.status.color }">
          {{ task.status.name }}
        </view>
        <view class="task-progress">
          <view class="progress-bar">
            <view class="progress-fill" :style="{ width: task.progress + '%', backgroundColor: task.status.color }"></view>
          </view>
          <text class="progress-text">{{ task.progress }}%</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref, computed, onMounted } from 'vue'
import type { Task, Assignee } from '../types/task'
import { taskApi } from '../services/task'

const props = defineProps<{
  task: Task
}>()

// 负责人名称
const assigneeName = ref('')

// 格式化日期
const formatDate = (dateStr?: string) => {
  if (!dateStr) return ''
  const date = new Date(dateStr)
  return date.toLocaleDateString('zh-CN', {
    month: '2-digit',
    day: '2-digit'
  })
}

// 获取负责人名称
const fetchAssigneeName = async () => {
  try {
    const options = await taskApi.getOptions()
    const assignee = options.assignees.find(a => a.id === props.task.assignee)
    assigneeName.value = assignee?.name || props.task.assignee
  } catch (err) {
    console.error('获取负责人信息失败:', err)
    assigneeName.value = props.task.assignee
  }
}

// 组件挂载时获取负责人信息
onMounted(() => {
  fetchAssigneeName()
})
</script>

<style lang="scss">
.task-card {
  display: inline-block;
  width: 480rpx;
  background: #fff;
  border-radius: 12rpx;
  padding: 24rpx;
  margin-right: 24rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
  
  .task-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16rpx;
    
    .task-title {
      flex: 1;
      font-size: 32rpx;
      font-weight: 600;
      color: #2c3e50;
      margin-right: 16rpx;
    }
    
    .task-priority {
      padding: 4rpx 12rpx;
      border-radius: 4rpx;
      font-size: 24rpx;
      color: #fff;
    }
  }
  
  .task-content {
    .task-info {
      margin-bottom: 16rpx;
      
      .info-item {
        display: flex;
        align-items: center;
        margin-bottom: 8rpx;
        
        .info-text {
          margin-left: 8rpx;
          font-size: 24rpx;
          color: #64748b;
        }
      }
    }
    
    .task-description {
      font-size: 28rpx;
      color: #475569;
      margin-bottom: 16rpx;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
    }
    
    .task-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      
      .task-status {
        padding: 4rpx 12rpx;
        border-radius: 4rpx;
        font-size: 24rpx;
      }
      
      .task-progress {
        display: flex;
        align-items: center;
        
        .progress-bar {
          width: 120rpx;
          height: 8rpx;
          background: #e2e8f0;
          border-radius: 4rpx;
          margin-right: 8rpx;
          overflow: hidden;
          
          .progress-fill {
            height: 100%;
            transition: width 0.3s ease;
          }
        }
        
        .progress-text {
          font-size: 24rpx;
          color: #64748b;
        }
      }
    }
  }
}
</style> 